<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import chinaGEOJson from "./china.json";

const mapName = "chinaMap";
// 注册中国地图
echarts.registerMap(mapName, chinaGEOJson);

defineOptions({ name: "Demo01.vue" });

const echartsDomRef = ref();

function initComp(echartsDom) {
  const myChart = echarts.init(echartsDom);
  var option = {
    tooltip: {},
    series: [
      {
        name: "自定义标记点",
        type: "map",
        map: mapName, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
        label: {
          // 去除hover时显示的省份名称
          show: false,
          fontSize: 0,
        },
        /**
         * 地图缩放
         */
        zoom: 1.2,
        markPoint: {
          symbol: "pin", // 自定义图片路径
          symbolSize: [20, 20], // 图片大小
          itemStyle: {
            color: "red",
          },
          label: {
            position: "top",
            color: "green",
            fontSize: 20,
          },
          // coord数组存放地址坐标
          data: [
            { name: "湖南省", coord: [112.982279, 28.19409], value: "长沙市" },
            {
              name: "四川省",
              coord: [106.55, 29.56, 32],
              value: "重庆市",
              itemStyle: {
                color: "blue",
              },
            },
            {
              name: "吉林省",
              coord: [125.3245,43.886841],
              value: "长春市",
              itemStyle: {
                color: "blue",
              },
            },
          ],
        },
      },
    ],
  };
  myChart.setOption(option);
}
onMounted(() => {
  const echartsDom = echartsDomRef.value;
  if (echartsDom) {
    initComp(echartsDom);
  }
});
</script>

<template>
  <div ref="echartsDomRef" style="height: 500px"></div>
</template>

<style lang="scss" scoped></style>
